﻿@{
    ViewBag.Title = "TreeView : Show ContextMenu";
}

<h2>TreeView : Show ContextMenu</h2>

<h3>Sample</h3>

@{
    Html.Telerik().TreeView()
        .Name("treeview")
        .DataBinding(dataBinding => dataBinding
            .Ajax().Select("SelectTreeItems", "TreeView")
        )
        .ClientEvents(events => events.OnLoad("treeview_onLoad"))
        .Render();
}

<script type="text/javascript">
    treeview_onLoad = function (e) {
        $('#treeview').data('tTreeView').addContextMenu({
            evaluateNode: function (treeview, node) {
                return node.find('ul').length > 0;
            },
            menuItems: [{
                text: 'Properties',
                onclick: treeview_onProperties
            }]
        });

        $('#treeview').data('tTreeView').addContextMenu({
            evaluateNode: function (treeview, node) {
                return node.find('ul').length == 0;
            },
            menuItems: [{
                text: 'Edit',
                onclick: treeview_onEdit
            }, {
                text: 'Delete',
                onclick: treeview_onDelete
            }, {
                separator: true
            }, {
                text: 'Properties',
                spriteCssClass: 'properties-icon',
                onclick: treeview_onProperties
            }],
            contextMenuOpening: function (menu, $node) {
                if ($node.find('span').text() == 'ASP.NET MVC') {
                    $.each(menu.menuItems, function (idx, item) {
                        if (item.text == 'Edit' || item.text == 'Delete') {
                            item.disabled = true;
                        }
                    });
                }
            }
        });
    }

    treeview_onProperties = function (e) {
        alert('You Clicked ' + e.item.text() + ' for ' + e.treeview.getItemText(e.node) + ' with a value of ' + e.treeview.getItemValue(e.node));
    }

    treeview_onEdit = function (e) {
        alert('You Clicked ' + e.item.text() + ' for ' + e.treeview.getItemText(e.node) + ' with a value of ' + e.treeview.getItemValue(e.node));
    }

    treeview_onDelete = function (e) {
        alert('You Clicked ' + e.item.text() + ' for ' + e.treeview.getItemText(e.node) + ' with a value of ' + e.treeview.getItemValue(e.node));
    }

    treeview_onViewPage = function (e) {
        window.location = e.node.find('a').attr('href');
    }
</script>
